<template>
	<view>
		<view style="margin: 10px;">
			<view style="display: flex;flex-direction: row;" @click="gotoBack()">当前城市:<u-icon style="margin-left: 1px;" label-pos="right" :label="cityName" name="map"
					label-color="#333333" color="#333333" size="16"></u-icon></view>
		</view>
		<u-button @click="submitall">全国工作</u-button>
		<view class="classifyBigBox">
			<view class="leftmenu">
				<view class="oneClassify flex" :class="{ selectActive: selected === item.id }"
				v-for="(item,i) in cityList" :key="item.id"  @click="onSelectClassify(item)">
				{{item.name}}
				</view>
			</view>
			<view class="">
				<view class="oneClassify flex" :class="{selectActive:selected[item.id]==true}"
				v-for="(item,i) in cityList2" @click="onSelectClassify2(item)">
				{{item.name}}
				</view>
			</view>
		
			<u-popup :show="showsubmit" :overlay="mask" >
				<u-button size="large" type="primary" @click="submitchoose">确认</u-button>
			</u-popup>
			
		</view>
		<view v-show="showsubmit" class="mmsk" style="height: 140rpx;width: 100%;">
			
		</view>
	</view>
</template>

<script>
	import Index from '@/common/index-model.js'
	let index = new Index();
	var amapFile = require('@/utils/amap-wx.js')
	var myAmapFun = new amapFile.AMapWX({key: 'a012b582a72fc69505c064e0f4ccd782'})
	export default {
		data() {
			return {
				cityName: '西安市',
				cityList: [],
				cityList2: [],
				showsubmit:false,
				mask:false,
				 selected: null, 
			};
		},
		onLoad(opt) {
			this.cityName = opt.city
			console.log(opt.city)
			// this.getLon()
			this.getCityList()
		},
		methods: {
			getCityList(){
				index.getPublicMember({pid: 0}, '/client/public/xcxhasJobRegions', 'get', res => {
					this.cityList = res.data.result;
					console.log('banner1返回的结果是', this.cityList);
				})
			},
			gotoBack(){
				uni.$emit('backInfo',{
				                                     cityName:this.cityName
				
				                    })
				uni.navigateBack()
			},
			//提交
			submitall(){
				uni.$emit('backInfo',{
				                                     provinceName:"",cityName:""
				                    })
				uni.navigateBack()
			},
			submitchoose(){
				
				uni.$emit('backInfo',{
				                                     provinceName:this.cityName,cityName:""
				                    })
				uni.navigateBack()
			},
			onSelectClassify(item){
				this.selected = item.id;
				this.showsubmit = true
				console.log(item.id)
				index.getPublicMember({pid: item.id}, '/client/public/xcxhasJobRegions', 'get', res => {
					this.cityList2 = res.data.result;
					console.log('banner2返回的结果是', this.cityList2);
				})
				this.cityName = item.name
				// this.cityName = item.name
				// uni.$emit('backInfo',{
				//                                      cityName:item.name
				//                     })
				// uni.navigateBack()
			},
			onSelectClassify2(item){
				this.cityName = item.name
				uni.$emit('backInfo',{
				                                     cityName:item.name
				                    })
				uni.navigateBack()
			},
			getLon() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						this.lat = res.latitude
						this.lon = res.longitude
						myAmapFun.getRegeo({
							location: this.lon + ',' + this.lat,
							success: (rs) => {
								console.log(rs, '====当前位置信息====')
								let arr = rs
								this.cityName = arr[0].regeocodeData.addressComponent.city
								// this.currentCity.economize = arr[0].regeocodeData.addressComponent.province
								// this.currentCity.city = arr[0].regeocodeData.addressComponent.city
								// this.currentCity.area = arr[0].regeocodeData.addressComponent.district
							}
						})
					},
					fail: (err) => {
						uni.getSetting({
							success: (rs) => {
								let status = rs.authSetting
								if (!status['scope.userLocation']) {
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法开启',
										success: (tip) => {
											if (tip.confirm) {
												uni.openSetting({
													success: (data) => {
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															index
																.show_tips(
																	'授权成功')
															uni.getLocation({
																type: 'wgs84',
																success: (
																	nodes
																) => {
																	console
																		.log(
																			'99999999999',
																			nodes
																		)
																}
															})
														} else {
															index
																.show_tips(
																	'授权失败')
															return false
														}

													}
												})
											}
										}
									})
								} else {
									uni.getLocation({
										type: 'wgs84',
										success: (nodes) => {
											console.log('001001001', nodes)
										}
									})
								}
							},
							fail: (noerr) => {
								index.show_tips('调用授权窗口失败')
								return false
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	
	.classifyBigBox {
		// margin: 47rpx 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 50rpx;
		padding: 10px;
		overflow: hidden;
		height: 85vh;
	}

	.oneClassify {
		display: flex;
		align-items: center;
		padding: 10px;
		justify-content: center;
		background: #F7F7F7;
		color: #424242;
		border-radius: 13rpx;
		margin-top: 4rpx;
	}
	.selectActive {
		background: #0575FF;
		color: #F3F3F3;
	} 
	.leftmenu{
		height: 85vh;
		border-right: 2px solid black;
		padding-right: 20rpx;
		overflow: auto;
	}
	.oneClassify.selectActive {
	  background-color: blue;
	  color: white;
	}
</style>